<!-- src/pages/home/index.vue -->
<template>
    <view class="home-container">
      <!-- 顶部搜索 -->
      <view class="search-section">
        <wd-search
          v-model="searchText"
          placeholder="搜索技能、职位或程序员"
          @search="onSearch"
        />
      </view>
  
      <!-- 分类标签 -->
      <view class="tab-section">
        <wd-tabs v-model="activeTab">
          <wd-tab v-for="tab in tabs" :key="tab.key" :title="tab.name" />
        </wd-tabs>
      </view>
  
      <!-- 全部程序员列表 -->
      <view class="dev-list-section">
        <view class="dev-list">
          <view v-for="dev in devList" :key="dev.id" class="dev-list-card">
            <view class="card-header">
              <view class="left">
                <image :src="dev.avatar" class="dev-avatar" mode="aspectFill"/>
                <view class="dev-info">
                  <view class="dev-name">{{ dev.name }}</view>
                  <view class="dev-exp">{{ dev.experience }}年经验 | {{ dev.title }}</view>
                </view>
              </view>
              <view class="rating">
                <text>{{ dev.rating }}</text>
              </view>
            </view>
            
            <view class="skill-tags">
              <wd-tag 
                v-for="skill in dev.skills" 
                :key="skill" 
                size="small"
              >{{ skill }}</wd-tag>
            </view>
            
            <view class="dev-desc">{{ dev.description }}</view>
            
            <view class="card-footer">
              <wd-tag type="success" v-if="dev.available">可接单</wd-tag>
              <wd-button type="primary" size="small" class="contact-btn" @click="contactDev(dev.id)">
                联系我
              </wd-button>
            </view>
          </view>
        </view>
      </view>
    </view>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { getOccupationList } from './index.api' // 引入封装好的接口
  
  // 搜索相关
  const searchText = ref('')
  const onSearch = (value: string) => {
    console.log('搜索:', value)
  }
  
  // 标签页
  const activeTab = ref(0)
  const tabs = ref([])
  
  // 获取职业分类数据
  const getOccupations = async () => {
    try {
      const res = await getOccupationList()
      if(res.data.length > 0) {
        tabs.value = [
          {
            key: 0,
            name: '全部'
          },
          ...res.data.map((item: any) => ({
            key: item.value,
            name: item.title
          }))
        ]
      }
    } catch (error) {
      console.error('获取职业分类失败:', error)
    }
  }
  
  onMounted(() => {
    getOccupations()
  })
  
  // 程序员列表数据
  const devList = ref([
  {
      id: 1,
      name: '陈志远',
      avatar: '/static/images/avatar1.png',
      experience: 5,
      title: '前端开发',
      skills: ['React', 'Vue', 'Node.js'],
      rating: 5.0,
      description: '全栈开发工程师，擅长前后端分离架构，有大型电商平台开发经验',
      available: true
    },
    {
      id: 2,
      name: '林美玲',
      avatar: '/static/images/avatar2.png',
      experience: 3,
      title: '全栈开发',
      skills: ['Java', 'Spring', 'MySQL'],
      rating: 4.5,
      description: '全栈开发工程师，擅长前后端分离架构，有大型电商平台开发经验',
      available: true
    },
    {
      id: 3,
      name: '张伟明',
      avatar: '/static/images/avatar3.png',
      experience: 7,
      title: '全栈开发',
      skills: ['React', 'Node.js', 'Python', 'Docker'],
      rating: 4.9,
      description: '全栈开发工程师，擅长前后端分离架构，有大型电商平台开发经验',
      available: true
    },
    {
      id: 4,
      name: '王静怡',
      avatar: '/static/images/avatar4.png',
      experience: 4,
      title: '设计师',
      skills: ['Figma', 'Sketch', 'UI/UX'],
      rating: 4.8,
      description: '专注于移动应用界面设计，擅长用户体验优化，负责多个获得设计奖项',
      available: true
    }
  ])
  
  // 联系开发者
  const contactDev = (id: number) => {
    console.log('联系开发者:', id)
  }
  
  // 分页相关
  const loading = ref(false)
  const finished = ref(false)
  const page = ref(1)
  const pageSize = 10
  
  // 加载更多数据
  const loadMore = async () => {
    if (loading.value || finished.value) return
    
    loading.value = true
    try {
      // 模拟接口请求
      await new Promise(resolve => setTimeout(resolve, 1000))
      
      // 这里替换为实际的API调用
      const newData = [
        {
          id: page.value * 2 + 1,
          name: '新开发者' + (page.value * 2 + 1),
          avatar: '/static/images/avatar3.png',
          experience: 5,
          title: '全栈开发',
          skills: ['Vue', 'React', 'Node.js'],
          rating: 4.7,
          description: '富有经验的全栈开发工程师',
          available: true
        },
        {
          id: page.value * 2 + 2,
          name: '新开发者' + (page.value * 2 + 2),
          avatar: '/static/images/avatar4.png',
          experience: 3,
          title: '前端开发',
          skills: ['Vue', 'React'],
          rating: 4.5,
          description: '专注前端开发三年',
          available: false
        }
      ]
      
      devList.value.push(...newData)
      page.value++
      
      // 模拟数据加载完成
      if (page.value > 5) {
        finished.value = true
      }
    } catch (error) {
      console.error('加载失败:', error)
    } finally {
      loading.value = false
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .home-container {
    padding: 20rpx;
    background: #f5f5f5;
  }
  
  .search-section {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    padding: 20rpx;
  }
  
  .tab-section {
    margin: 20rpx 0;
    background: #fff;

    :deep(.wd-tabs__nav-wrap) {
      &::-webkit-scrollbar {
        display: none; // 隐藏滚动条
      }
      scrollbar-width: none; // Firefox
      -ms-overflow-style: none; // IE and Edge
    }

    // 添加以下样式来修改选中底部颜色
    :deep(.wd-tabs__line) {
      background-color: #000 !important; // 设置底部线条为黑色
    }

    :deep(.wd-tab.is-active) {
      color: #000 !important; // 设置选中文字为黑色
    }
  }
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    margin: 30rpx 0;
  }
  
  .recommend-scroll {
    white-space: nowrap;
  }
  
  .recommend-list {
    display: flex;
    padding: 10rpx 0;
  }
  
  .recommend-card {
    background: #fff;
    border-radius: 16rpx;
    padding: 20rpx;
    margin-right: 20rpx;
    width: 400rpx;
    display: inline-block;
    
    .dev-avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 60rpx;
    }
    
    .dev-name {
      font-size: 28rpx;
      font-weight: bold;
      margin-top: 16rpx;
    }
    
    .dev-exp {
      font-size: 24rpx;
      color: #666;
      margin: 8rpx 0;
    }
  }
  
  .dev-list-card {
    background: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .left {
        display: flex;
        align-items: center;
      }
      
      .dev-avatar {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50rpx;
        margin-right: 20rpx;
      }
      
      .dev-info {
        .dev-name {
          font-size: 32rpx;
          font-weight: bold;
        }
        
        .dev-exp {
          font-size: 24rpx;
          color: #666;
        }
      }
      
      .rating {
        font-size: 36rpx;
        color: #ff9900;
        font-weight: bold;
      }
    }
    
    .skill-tags {
      margin: 20rpx 0;
      display: flex;
      flex-wrap: wrap;
      gap: 10rpx;
    }
    
    .dev-desc {
      font-size: 28rpx;
      color: #666;
      margin: 20rpx 0;
    }
    
    .card-footer {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .contact-btn {
        position: absolute;
        right: 0;
        background: #000 !important;
        border-color: #000 !important;
        color: #fff !important;
      }
    }
  }
  </style>